<page-header></page-header>
<nz-card>

  <nz-button-group>
    <button nz-button nzType="primary" (click)="toAddNode()"><i nz-icon nzType="plus" nzTheme="outline"></i>追加节点</button>
    <button nz-button nzType="default" (click)="toUpdateNode()"><i nz-icon nzType="edit" theme="outline"></i>更新节点</button>
    <button nz-button nzType="danger" (click)="toRemoveNode()"><i nz-icon nzType="delete" theme="outline"></i>删除节点</button>
    <button nz-button nzType="default" (click)="getCheckedNodeIdGroupByCheckState()"><i nz-icon nzType="search" theme="outline"></i>获取选中节点</button>
  </nz-button-group>

  <nz-table #nzTable [nzData]="treeUtils?.data">
    <thead>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>备注</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-template ngFor let-data [ngForOf]="nzTable.data">
      <ng-template ngFor let-item [ngForOf]="treeUtils?.expandDataCache[data.key]">
        <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
          <td [nzIndentSize]="item.level*20" [nzShowExpand]="!!item && (!!item.children || item.hasChildren)" [(nzExpand)]="item.expand" (nzExpandChange)="collapse(treeUtils?.expandDataCache[data.key],item,$event)">
            <label nz-checkbox
                   [(nzChecked)]="item.checked"
                   [(ngModel)]="item.checked"
                   (ngModelChange)="checkboxChange($event,item)"
            >
              {{item.name}}
            </label>
          </td>
          <td>{{item.num}}</td>
          <td>{{item.address}}</td>
          <td>
            <a (click)="openCreateForm(item)">
              <i nz-icon nzType="plus" nzTheme="outline"></i>子节点
            </a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="openUpdateForm(item)">
              <i nz-icon nzType="edit" nzTheme="outline"></i>更新
            </a>
            <nz-divider nzType="vertical"></nz-divider>
            <a  (click)="toRemoveNode(item)">
              <i nz-icon nzType="delete" nzTheme="outline"></i>删除
            </a>
          </td>
        </tr>
      </ng-template>
    </ng-template>
    </tbody>
  </nz-table>

</nz-card>
